<template>
  <el-select class="role-select" v-bind="$attrs" multiple :multiple-limit="3">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>

<script>
import { getRoleListAll } from "@/api/system";

export default {
  name: "RoleSelect",

  data() {
    return {
      options: [],
    };
  },

  methods: {
    async refresh() {
      const result = await getRoleListAll();
      this.options = result;
    },
  },

  created() {
    this.refresh();
  },
};
</script>

<style lang="scss" scoped>
.role-select {
  width: 100%;
}
</style>
